<template>
  <div>
    <avue-form
      :v-loading="true"
      ref="form"
      v-model="obj"
      :option="option"
      @reset-change="emptytChange"
      @submit="submit"
    >
      <template slot-scope="scope" slot="flowApproveDetailsVos">
        <div class="flowChart">
          <div class="abc">
            <!-- {{scope.value}} -->
            <el-steps
              v-if="scope.value.length > 0"
              finish-status="success"
              direction="vertical"
              space="150px"
              :active="
                scope.value[scope.value.length - 1].status === 10
                  ? scope.value.length
                  : scope.value.length + 1
              "
            >
              <el-step :title="DesTitle" :description="DesOption"></el-step>
              <el-step
                :status="
                  item.status == '待审批'
                    ? 'wait'
                    : item.status == '通过'
                    ? 'success'
                    : 'error'
                "
                :title="'[ ' + item.status + ' ]' + item.name"
                :description="item.approveTime"
                v-for="(item, index) in scope.value"
                :key="index"
              >
                <template slot="description">
                  <span>{{ item.approveTime }}<br />{{ item.opinion }}</span>
                </template>
              </el-step>
            </el-steps>
          </div>
        </div>
      </template>
      <template slot-scope="scope" slot="files">
        <div>
          <p>
            <img
              width="100px"
              height="100px"
              style="margin-right: 10px"
              v-for="(d, index) of scope.value"
              :src="d.url"
              :key="index"
              @click="openPreview(index)"
            />
          </p>
        </div>
      </template>
    </avue-form>
    <div>
      <el-button
        v-if="openBut"
        type="primary"
        @click="editBut()"
        size="small"
        style="margin: 20px"
        >重新编辑</el-button
      >
    </div>
  </div>
</template>

<script>
import { approveFlow, willHttp } from "@/api/teacherPage/review";

import { baseUrl } from "@/config/env";
export default {
  name: "moralEducationDrawer",
  props: ["reviewId", "isApprovue", "type", "studentEdit"],
  data() {
    return {
      DesTitle: "",
      // 预览图片
      imgArr: [],
      // 控制重新编辑按钮
      openBut: false,
      // 传入重新编辑框中的数据
      typeTe: "",
      remark: "",
      files: [],
      active: 0,
      baseUrl: baseUrl,
      obj: {
        flowApproveDetailsVos: [],
      },
      option: {
        emptyBtn: false,
        submitBtn: true,
        column: [
          {
            label: "流程图",
            prop: "flowApproveDetailsVos",
            formslot: true,
            span: 24,
          },
          {
            label: "审批理由",
            prop: "remark",
            readonly: true,
            detail: true,
            span: 24,
          },
          {
            label: "附件",
            prop: "files",
            formslot: true,
            span: 24,
          },
          {
            label: "选项",
            prop: "status",
            type: "radio",
            isApprovue: true,
            span: 24,
            dicData: [
              {
                label: "同意",
                value: 20,
              },
              {
                label: "拒绝",
                value: -10,
              },
              {
                label: "退回重写",
                value: -20,
              },
            ],
            rules: [
              {
                required: true,
                message: "请选择",
                trigger: "blur",
              },
            ],
          },
          {
            isApprovue: true,
            label: "审批意见",
            prop: "opinion",
            type: "textarea",
            span: 24,
          },
        ],
      },
    };
  },
  async mounted() {
    // 学科竞赛
    await willHttp("course", this.reviewId).then((res) => {
      this.getData(res[0]);
    });
  },
  updated() {
    if (!this.isApprovue) {
      let tempData = [];
      this.option.column.forEach((item) => {
        if (!item.isApprovue) {
          tempData.push(item);
        }
      });
      this.option.submitBtn = this.isApprovue;
      this.option.emptyBtn = this.isApprovue;
      this.option.column = tempData;
    }
  },
  methods: {
    openPreview(index = 0) {
      this.$ImagePreview(this.imgArr, index);
    },
    getData(res) {
      this.DesTitle = "[ 发起 ] " + res.data.studentName;
      let timeTi = new Date(res.data.createTime);
      this.DesOption = this.formatDate(timeTi);
      this.obj = res.data;
      this.obj.id = this.reviewId;
      res.data.files.forEach((ele) => {
        ele.url = baseUrl + ele.url;
        ele.thumbUrl = baseUrl + ele.url;
      });
      this.imgArr = res.data.files;
      if (res.data.flowApproveDetailsVos) {
        res.data.flowApproveDetailsVos.forEach((ele) => {
          // 处理时间
          if (ele.approveTime) {
            let time = new Date(ele.approveTime);
            ele.approveTime = this.formatDate(time);
            ele.approveTime = ele.approveTime;
          }
          if (this.studentEdit == false && ele.status == -20) {
            this.openBut = true;
          } else {
            this.openBut = false;
          }
          // 处理审批人状态
          if (ele.status) {
            switch (ele.status) {
              case 10:
                ele.status = "待审批";
                break;
              case -10:
                ele.status = "拒绝";
                break;
              case 20:
                ele.status = "通过";
                break;
              case -20:
                ele.status = "退回";
                break;
            }
          }
        });
      }
    },

    formatDate(now) {
      var year = now.getFullYear(); //取得4位数的年份
      var month = now.getMonth() + 1; //取得日期中的月份，其中0表示1月，11表示12月
      var date = now.getDate(); //返回日期月份中的天数（1到31）
      var hour = now.getHours(); //返回日期中的小时数（0到23）
      var minute = now.getMinutes(); //返回日期中的分钟数（0到59）
      var second = now.getSeconds(); //返回日期中的秒数（0到59）
      return (
        year +
        "-" +
        month +
        "-" +
        date +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second
      );
    },
    editBut() {
      this.$router.push(
        "/applyMoralEducation//applyCourse?id=" + this.reviewId
      );
    },
    submit(form, done) {
      approveFlow(form).then((res) => {
        console.log(res);
        if (res.code === 1) {
          this.$message.success("审批成功！");
          this.$emit("close", false);
        } else {
          this.$message({
            type: "info",
            message: "审批失败！",
          });
        }
      });
      done();
    },
  },
};
</script>

<style>
.flowChart {
  width: 400px;
  height: 200px;
  overflow-y: scroll;
}
.abc {
  padding-left: 40px;
}
</style>
